<template>
  <div class="banner animated bounce">
    <img
      class="banner-image"
      :src="bannerImg"
      alt="banner"
    >
  </div>
</template>

<script>
import bannerImg from '../assets/qianduandaohang.png';

export default {
  data() {
    return {
      bannerImg,
    };
  },
};
</script>

<style lang="scss">

// copy animated.css
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

.banner {
  text-align: center;

  .banner-image {
    width: 100%;
    height: auto;
    max-width: 320px;
    max-height: 180px;
  }
}
</style>
